<template>
  <div v-if="!formJson.widgetList">loading....</div>
  <VFormRender v-else :form-json="formJson"></VFormRender>
</template>

<script>
// import VFormRender from '@/components/form-render/index.vue'
import { getAllConfigFormData } from '@/api/form'
// import jsonp from 'jsonp';

export default {
  name: 'RenderApp',
  components: {
    // VFormRender,
  },
  data() {
    return {
      formJson: {
        'widgetList': [],
        'formConfig': {
          'modelName': 'formData',
          'refName': 'vForm',
          'rulesName': 'rules',
          'labelWidth': 80,
          'labelPosition': 'left',
          'size': '',
          'labelAlign': 'label-left-align',
          'cssCode': '',
          'customClass': '',
          'functions': '',
          'layoutType': 'PC',
          'onFormCreated': '',
          'onFormMounted': '',
          'onFormDataChange': '',
          'onFormValidate': '',
        },
      },
    }
  },
  created() {
    // console.log('render created11111111111111111111')
    /**
     * 主应用应该
     * const { bus } = WujieVue
     * bus.$emit("changeParams", {
     *   load: '1',
     * });
     */
    // 子应用监听 - 测试
    window.$wujie?.bus.$on("changeParams", (arg1, arg2, ...args) => {
      console.log(arg1, arg2, args, '================================================');
    });
  },
  mounted() {
    // 从localStorage获取表单配置和组件列表
    // const widgetList = window.localStorage.getItem('widget__list__backup')
    // const formConfig = window.localStorage.getItem('form__config__backup')
    // if (widgetList) {
    //   this.formJson.widgetList = JSON.parse(widgetList)
    // }
    // if (formConfig) {
    //   this.formJson.formConfig = JSON.parse(formConfig)
    // }
    // console.log(window.$wujie.props.load, '---------------------VForm get props-------------------');
    window.$wujie?.bus.$on("changeParams", (arg1, arg2, ...args) => {
      getAllConfigFormData({load: arg1}).then(res => {
        if (res.status === 200 && res.data) {
          console.log(res.data, 'res.data');
          this.formJson.widgetList = res.data.widgetList;
          this.formJson.formConfig = res.data.formConfig;
        }
      })
      return;
    });
    getAllConfigFormData({load: localStorage.getItem('load')}).then(res => {
        if (res.status === 200 && res.data) {
          console.log(res.data, 'res.data', localStorage.getItem('load'));
          this.formJson.widgetList = res.data.widgetList;
          this.formJson.formConfig = res.data.formConfig;
          // this.fetchData()
        }
      })
  },
  methods: {
    async fetchData () {
      // this.$jsonp('https://qzj8013.his100.cn/Scripts/test/form2.js?version=2',{version: 2}, (err, data) => {
      //   if (err) {
      //     console.log(err, 'errrrr');
      //   } else {
      //     console.log(data);
      //   }
      // })
      // 服务端返回的格式应为 handleData({formConfig:{},widgetList :[]})
      // jsonp('https://qzj8013.his100.cn/Scripts/test/form2.js?version=2&callback=handleData', { param: 'callback' }, (err, res) => {
      //   if (err) {
      //     console.error('Error:', err);
      //   } else {
      //     // console.log(res, 'res,================1===================');
      //     data.value = res;
      //   }
      // });
    }
  }
}
</script>

<style lang="scss"></style>